<style lang='scss' scoped>
	.index {
		swiper {
			height: 350rpx;

			image {
				width: 100%;
				vertical-align: middle;
			}
		}

		.nav {
			display: flex;

			.channel {
				flex: 1;
				text-align: center;
				padding: 10rpx;

				image {
					width: 80%;
				}
			}
		}

		.louceng {
			.goods_list {
				image {
					width: 32.2%;
					float: left;
				}

				&:nth-last-child(-n+4) {
					image {
						height: 200rpx !important;
						border-left: 10rpx solid #FFFFFF;
						vertical-align: middle;
					}
				}
				&:nth-child(3),
				&:nth-child(4) {
					image {
						border-bottom: 10rpx solid #FFFFFF;
					}
				}
			}
		}
	}
</style>
<template>
	<view class='index'>
		<mybtn></mybtn>
		<!-- 轮播图 -->
		<swiper :autoplay="true" circular indicator-dots>
			<swiper-item v-for="(item,index) in banner" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="nav">
			<view class="channel" v-for="(item,index) in channel" :key="index">
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="louceng" v-for="(item,index) in brandList" :key="index">
			<view class="title">
				<image :src="item.floor_title.image_src" mode="widthFix" style="width: 100vw;"></image>
			</view>
			<view class="goods_list" v-for="(i,x) in item.product_list" :key="x">
				<image :src="i.image_src" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				banner: [],
				channel: [],
				brandList: []
			}
		},
		onLoad(o) {
			this.getwxlogin()
		},
		methods: {

			getwxlogin() {
				api({
					url: 'public/v1/home/swiperdata',
				}).then(res => {
					this.banner = res.message
				})
				api({
					url: 'public/v1/home/catitems',
				}).then(res => {
					this.channel = res.message
				})
				api({
					url: 'public/v1/home/floordata',
				}).then(res => {
					this.brandList = res.message
				})
			}

		}
	}
</script>
